<template>
  <el-card v-loading='loading'>
    <el-row class="f-row ai-c">
      <span class="mr-1 left">头像</span>
      <el-avatar :src="face"></el-avatar>
    </el-row>
    <el-row class="f-row">
      <span class="mr-1 left">擅长领域:</span>
      <span class="right">{{ domain }}</span>
    </el-row>
    <el-row class="f-row">
      <span class="mr-1 left">个人简介：</span>
      <span class="right">{{ introduction }}</span>
    </el-row>
    <div class="btn-deep" @click="setuserinfoFn">修改</div>
  </el-card>
</template>
<script>
import { expert_centerinfo } from "@/request/api";
export default {
  data() {
    return {
      introduction: "",
      domain: "",
      face: "",
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    setuserinfoFn() {
      let options = {
        introduction:this.introduction,
        domain:this.domain,
        face:this.face,
      };
      this.$router.push({
        path: "setuserInfo",
        query: options,
      });
    },
    getdata() {
      this.loading=true
      expert_centerinfo()
        .then((res) => {
             this.loading=false
          this.domain = res.result.domain;
          this.face = res.result.face;
          this.introduction = res.result.introduction;
        })
        .catch((err) => {
            this.loading=false
          err, "专家个人中心信息获取失败";
        });
    },
  },
};
</script>
<style lang="less" scoped>
.btn-deep {
  margin-left: 6.25rem;
}
.el-card {
  width: 100%;
  height: 100%;
  padding-left: 3rem !important;
  box-sizing: border-box;
}
.left {
  color: #1f1f1f;
  line-height: 3rem;
  width: 6.25rem;
  line-height: 3rem;
}
.right {
  color: #676767;
  flex: 1;
  line-height: 3rem;
}
</style>